<template>
  <div class="login" ref="login">
    <div class="box">
      <div class="logoBox">
        <img src="../../images/logo.png"  class="logo" alt="logo"/>
      </div>
        <div class="loginBox">
          <input type="text" placeholder="邮箱" class="email" v-model="email" @blur="emailRight">
          <input type="password" placeholder="密码" class="password" v-model="passWord" @blur="pwRight">
          <section class="codeBox">
            <input type="text" placeholder="验证码" class="code" v-model="verifyCode">
            <img src="" alt="" @click="getCode" ref="show_code" class="codeImg">
          </section>
        </div>
        <router-link to="reset_password01" class="fpLink">忘记密码</router-link>
        <button class="btn" @click="login">登录</button>
      <div class="registerLink">
        <span>还没有帐号？</span>
        <router-link to="register">申请一个</router-link>
      </div>

    </div>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>

  </div>
</template>

<script>
  import alertTip from '../../components/common/alertTip'
  import {mapState, mapMutations} from 'vuex'
  import { login } from '../../service/getData'
  import CryptoJS from 'crypto-js'

export default {
  data () {
    return {
      email: null,  //邮箱地址
      passWord: null,  //密码
      md5PassWord: null, //md5加密后的密码
      userInfo: null, //获取到的用户信息
      showAlert: false, //显示提示组件
      alertText: null, //提示的内容
      verifyCode: "",  //验证码
      codeImage: "",
      uuid: "",  //code标识码
    }
  },
  components: {
    alertTip,
  },
  computed: {
    //判断邮箱地址
    rightEmail: function (){
      return /^\w+@(\w+.)+com$/gi.test(this.email)
    }
  },
  methods: {
    ...mapMutations([
      'RECORD_USERINFO',
    ]),
    emailRight(){
      if (!this.rightEmail){
        this.showAlert = true;
        this.alertText = '邮箱格式不正确！';
        return
      }
    },
    pwRight(){
      if (this.passWord == null){
        this.showAlert = true;
        this.alertText = '密码不能为空！';
        return
      }
      if (this.passWord.length < 8 || this.passWord.length > 16){
        this.showAlert = true;
        this.alertText = '密码长度在8～16位之间！';
        return
      }
    },
    async getCode(){
      let res = null;

      await this.axios.get('/login_code')
        .then(response => {
          res = response.data;
        })
      if (res.success){
        this.$refs.show_code.src = "data:image/jpg;base64," + res.result[0].image;
        this.uuid = res.result[0].uuid;
      }else{
        this.showAlert = true;
        this.alertText = '网络连接失败，请稍后再试！';
        return
      }

    },

    async login(){
      if (this.passWord == null){
        this.showAlert = true;
        this.alertText = '密码不能为空！';
        return
      }
      if (this.passWord.length < 8 || this.passWord.length > 16){
        this.showAlert = true;
        this.alertText = '密码长度在8～16位之间！';
        return
      }
      if (!this.rightEmail) {
        this.showAlert = true;
        this.alertText = '邮箱格式不正确！';
        return
      }

      this.md5PassWord = CryptoJS.MD5(this.passWord).toString();

      let res = null;
//      res = await login(this.email, this.md5PassWord);

      let param = {
        email: this.email,
        password: this.md5PassWord,
        uuid: this.uuid,
        code: this.verifyCode
      }
      await this.axios.post('/login', param)
        .then(response => {
          res = response.data;
        })

      if (!res.success){
        this.showAlert = true;
        this.alertText = res.errors.messageCn;
      }else {
        this.RECORD_USERINFO(res);
//          如果帐号密码正确，则将信息存储起来，并且跳到主页面
        this.$router.push('home');
      }

    },
    closeTip(){
      this.showAlert = false;
    },
  },
  mounted (){
    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    if(w < h){
      this.$refs.login.style.height = h +'px';
    }else {
      this.$refs.login.style.height = w +'px';
    }
    this.getCode();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../style/mixin';
  .login{
    background-color: #33CCFF;

    p, span, input{
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .box{
      margin: 0 auto;
      position:absolute;
      top:0;
      left:0;
      width: 16rem;
      height: 16rem;
    }
    /*logo样式区  开始*/
    .logoBox{
      margin: 0 auto;
      width: 7rem;
      height: 3.5rem;
    }

    .logo{
      width: 5.6rem;
      height: 3.5rem;
      margin-top: 1rem;
      margin-left: 0.5rem;
      display: block;
    }
    /*logo样式区  结束*/

    /* 帐号密码输入区样式  开始*/
    .loginBox{
      margin: 0 auto;
      width: 9rem;
      height: 6rem;
      border: solid 0.05rem #ffffff;
      @include borderRadius(0.4rem);
      margin-top: 2rem;
      overflow: hidden;

      input{
        width: 100%;

        display: block;
        background-color: transparent;
        margin: 0;
        padding: 0;
        border: hidden;
        font-size: 0.5rem;
        text-indent: 0.4rem;
      }
      ::-webkit-input-placeholder{
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }

      .email{
        height: 25%;
        border-bottom: solid 0.05rem #FFFFFF;
      }
      .password{
        height: 25%;
        border-bottom: solid 0.05rem #FFFFFF;
      }
      .codeBox{
        height: 50%;
        display: flex;
        overflow: hidden;

        .code{
          flex: 1;
          display: flex;
          text-align: center;
          flex-direction: column;
          align-items: center;
          height: 100%;
          display: inline-block;
        }
        .codeImg{
          flex: 3;
          display: flex;
          text-align: center;
          flex-direction: column;
          align-items: center;
          height: 100%;
          margin: 0;
          display: inline-block;
        }
      }
      /* 帐号密码输入区样式  结束*/
    }

    /*忘记密码链接样式  开始*/
    a{
      font-size: 0.5rem;
      color: #FFFFFF;
      text-decoration: underline;
    }
    .fpLink{
      display: block;
      text-align: center;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
    /*忘记密码链接样式  结束*/

    /*登录按钮样式  开始*/
    .btn{
      margin: 0 auto;
      display: block;
      background-color: #FFFFFF;
      width: 9rem;
      height: 1.4rem;
      color: #33CCFF;
      font-size: 0.5rem;
      font-weight: bold;
      @include borderRadius(0.7rem);
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    /*登录按钮样式  结束*/

    span{
      font-size: 0.5rem;
      color: #FFFFFF;
    }

    .registerLink{
      text-align: center;
    }

  }
</style>
